<template>
	<view class="addwastetype">
		<titleName :name="name"></titleName>
		<view class="title-bgc"></view>
		<view class="content-wrap">
			<view class="qr-code">
				<view class="name"><text class="star">*</text>处置单位</view>
				<view class="val"> <uni-data-select class="two" placeholder="请选择处置单位"
						v-model="params.disposeenterpriseid" :localdata="enterPriseList"></uni-data-select> </view>
			</view>
			<view class="device-name">
				<view class="name"><text class="star">*</text>处置时间</view>
				<!-- <view class="val"><input type="text" class="two" v-model="params.commitdate" placeholder="请输入处置时间"
						placeholder-class="ipt" /></view> -->
				<view class="val" style="padding-left: 20rpx;"> <uni-datetime-picker type="date" disabled
						:clear-icon="false" v-model="params.commitdate" />
				</view>

			</view>
			<view class="pollution-production">
				<view class="name"><text class="star">*</text>涉废类型</view>
				<view class="val"> <uni-data-select class="two" placeholder="请选择涉废类型" v-model="params.wastetype"
						:localdata="adviceTypeList"></uni-data-select> </view>
			</view>

			<view class="feiqi">
				<view class="name"><text class="star">*</text>
					<view class="text">处置联单编号</view>
				</view>
				<view class="val"><input type="text" v-model="params.orderno" placeholder="请输入处置联单编号"
						placeholder-class="ipt" /></view>
			</view>
			<view class="feiqi width">
				<view class="name"><text class="star">*</text>
					<view class="text">处置量(kg)</view>
				</view>
				<view class="val"><input type="text" v-model="params.wastenum" placeholder="请输入处置量(kg)"
						placeholder-class="ipt" /></view>
			</view>
			<view class="feiqi">
				<view class="name" style="width: 200rpx;"><text class="star">*</text>
					<view class="text">处置联单图片</view>
				</view>

			</view>
			<view class="feiqi select-photo-wrap">
				<view class="select-photo" @click="uploadImage">
					<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/imghazardouswaste/upload-photo.png"
						mode=""></image>
					<text>（最多三张）</text>
				</view>
				<view :class="['for-image',index==2?'sb':'']" v-for="(item,index) in images" :key="index">
					<image :src="item" mode="">
					</image>
					<view class="dele" @click="deleImage(index)">✕</view>
				</view>
			</view>
		</view>
		<view class="btn-wrap">
			<button @click="save">保存</button>
		</view>

	</view>
</template>

<script setup>
	import titleName from '../../components/titleName.vue'
	import http from '../../request/index.js'
	import uploadFile from '../../request/uploadFile.js'
	import dayjs from 'dayjs'
	import {
		ref,
		reactive
	} from 'vue'
	let params = reactive({
		commitdate: dayjs().format("YYYY-MM-DD")
	})
	let images = ref([])
	let single = ref('')
	let name = "新增"
	let value = ref('')
	let enterPriseList = ref([])
	let adviceTypeList = ref([])

	let range = [{
			value: 1,
			text: "篮球"
		},
		{
			value: 2,
			text: "足球"
		},
		{
			value: 3,
			text: "游泳"
		},
	]
	let deleImage = (index) => {
		images.value.splice(index, 1)
	}
	http({
		url: '/listitem/getmodule',
		data: {
			module: 'B03'
		}
	}).then((res) => {
		if (res.code == 0) {
			let data = res.data
			adviceTypeList.value = data.map((item) => {
				return {
					text: item.name,
					value: item.id
				}
			})

		}

	})
	let uploadImage = () => {
		uni.chooseImage({
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			count: 10,
			success: function(res) {
				let tempFilePaths = res.tempFilePaths

				for (var i = 0; i < tempFilePaths.length; i++) {
					uploadFile({
						filePath: tempFilePaths[i]
					}).then((res) => {
						console.log(res, 'upload');
						if (res.code == 0) {

							images.value.push(res.data.url)
						}

					})
				}


			}
		});
	}
	http({
		url: '/enterpriseThird/listThirdEnterprises'
	}).then((res) => {
	
		if (res.code == 0) {
			enterPriseList.value = res.data.map((item) => {
				return {
					text: item.enterprisename,
					value: item.id
				}
			})
		}
	})
	let save = () => {
		params.disposeimgurl = images.value.join(',')
		if (!params.disposeimgurl) {
			uni.showToast({
				title: '请上传处置联单图片',
				icon: "none"
			})
			return
		}
		let keys = Object.keys(params)
		console.log(keys, 'keys');
		if (keys.length != 6) {
			uni.showToast({
				title: "请完整填写内容",
				icon: "error",
				mask: true
			})
			return
		}

		http({
			url: '/wasteDispose/addOrUpdate',
			data: params
		}).then((res) => {
			if (res.code == 0) {
				for (let key in params) {
					delete params[key]
				}
				images.value.length = 0
				params.commitdate = dayjs().format("YYYY-MM-DD")

				uni.showToast({
					title: '保存成功',
					icon: 'success',

				})
			}
			console.log(res, 'res');
		})
	}
</script>

<style lang="scss" scoped>
	:deep(.uni-select__input-text) {

		font-weight: 400;
		font-size: 28rpx;
		color: #333333;

	}

	:deep(.uni-date) {
		height: 100% !important;
		border: none !important;
	}

	:deep(.uni-date-editor) {
		height: 100% !important;
		border: none !important;
	}

	:deep(.uni-date-x) {
		height: 100% !important;
		border: none !important;
		padding-left: 0rpx;
	}

	:deep(.uni-date-editor--x) {
		height: 100% !important;
		border: none !important;
	}

	:deep(.uni-date__x-input) {

		font-weight: 400;
		font-size: 25rpx;
		color: #999999;

	}

	:deep(.uni-select__input-placeholder) {
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
	}

	:deep(.ipt) {

		font-weight: 400;
		font-size: 24rpx;
		color: #999999;

	}

	:deep(.uni-select) {
		height: 56rpx;
		width: 100%;
		border: none;
		padding-left: 0rpx;
	}

	.addwastetype {
		width: 100vw;
		height: 100vh;
		padding-top: 160rpx;


		.title-bgc {
			background: #0874FA;
			height: 160rpx;
			width: 100vw;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9;
		}

		.btn-wrap {
			padding: 63rpx 39rpx 68rpx 39rpx;
			margin-top: 164rpx;

			button {
				width: 100%;
				height: 88rpx;
				background: #0874FA;
				border-radius: 44rpx;

				font-weight: 500;
				font-size: 31rpx;
				color: #FFFFFF;
				line-height: 88rpx;

			}
		}

		.content-wrap {
			padding: 38rpx 28rpx 0 28rpx;

			view:first-child {
				margin-top: 0rpx !important;
			}

			.width {
				.name {
					.text {
						width: 150rpx !important;
					}
				}
			}

			.select-photo-wrap {
				height: auto !important;
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start !important;

				.for-image {
					margin-right: 20rpx;
					margin-top: 20rpx;
					position: relative;

					image {
						width: 150rpx;
						height: 150rpx;
					}
				}

				.dele {
					position: absolute;

					width: 30rpx;
					height: 30rpx;
					background: #989A9E;
					position: absolute;
					border-radius: 50%;
					right: -15rpx;
					top: -15rpx;
					color: #FFFFFF;
					display: flex;
					font-size: 17rpx;
					align-items: center;
					justify-content: center;
				}



				.for-image:nth-of-type(1),
				.for-image:nth-of-type(2),
				.for-image:nth-of-type(3) {}


				.select-photo {

					width: 150rpx;
					height: 150rpx;
					background: #FFFFFF;
					border-radius: 7rpx;
					border: 2px dashed #BFBFBF;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-right: 20rpx;

					image {
						width: 40rpx;
						height: 35rpx;
					}

					text {

						font-weight: 400;
						font-size: 15rpx;
						color: #999999;
						margin-top: 12rpx;

					}
				}
			}

			.feiqi {
				height: 60rpx;
				margin-top: 34rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.name {
					display: flex;

					.text {
						width: 180rpx;
						font-weight: 400;
						font-size: 31rpx;
						color: #000000;

					}

					.star {
						color: #F82A24
					}
				}

				.val {
					width: 470rpx;
					height: 100%;
					background: #FAFAFA;
					border-radius: 7rpx;
					border: 1px solid #BFBFBF;
					flex-shrink: 0;
					padding-left: 30rpx;

					input {
						height: 100%;

						font-weight: 400;
						font-size: 24rpx;
						color: #999999;

					}
				}
			}

			.qr-code,
			.device-name,
			.pollution-production,
			.waste {
				height: 60rpx;

				display: flex;
				justify-content: space-between;
				margin-top: 36rpx;
				align-items: center;

				.name {

					font-weight: 400;
					font-size: 31rpx;
					color: #000000;
					flex-wrap: wrap;

					.star {
						color: #F82A24
					}

				}

				.val {
					width: 470rpx;
					height: 100%;
					background: #FAFAFA;
					border-radius: 7rpx;
					border: 1px solid #BFBFBF;
					flex-shrink: 0;
					padding-left: 30rpx;

					input {
						height: 100%;
					}
				}
			}
		}


	}
</style>